<template>
  <el-form-item label="标题">
    <el-input v-model="fs.getProps().label" placeholder="请输入标题" />
  </el-form-item>
  <el-form-item label="字段名" v-if="props.field">
    <el-input v-model="fs.getProps().field" placeholder="请输入字段名" :disabled="fieldDisabled" />
  </el-form-item>
  <el-form-item label="占位提示" v-if="props.placeholder">
    <el-input v-model="fs.getProps().placeholder" placeholder="请输入占位提示" />
  </el-form-item>
  <el-form-item label="表格栅格">
    <el-slider v-model="fs.getProps().col" :marks="{ 12: '' }" :max="24" :min="1" style="width: 95%" />
  </el-form-item>
  <el-form-item label="组件宽度(%)" v-if="props.compWidth">
    <el-input-number v-model="fs.getProps().compWidth" :min="1" :max="100" controls-position="right" />
  </el-form-item>
  <el-form-item label="标题宽度(px)" v-if="props.labelWidth">
    <el-input-number v-model="fs.getProps().labelWidth" :min="1" controls-position="right" />
  </el-form-item>
</template>

<script setup lang="ts">
import { ElFormItem, ElInput, ElInputNumber, ElSlider } from 'element-plus'
import { useFlowStore } from '@/stores/flow'

const props = withDefaults(
  defineProps<{
    placeholder?: boolean
    labelWidth?: boolean
    compWidth?: boolean
    field?: boolean
    fieldDisabled?: boolean
  }>(),
  {
    placeholder: true,
    labelWidth: true,
    compWidth: true,
    field: true,
    fieldDisabled: false
  }
)
const fs = useFlowStore()
</script>
